@name yt {
  @b slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 0;
    @e container {
      display: flex;
      width: 100%;
      height: 100%;
      font-size: 0;
    }
    @e item {
      position: relative;
      flex: 1;
    }
    @e dots {
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translate3d(-50%, 0, 0);
    }
    @e dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 5px;
      margin: 0 3px;
      transition: width .2s ease;
      background-color: #fff;
      @when active {
        width: 20px;
        background-color: var(--fill_color);
      }
    }
  }
}
